<template>
  <div class="occupancy-trend-line">
    <EChart
      :option="lineOption"
      :width="width"
      :height="height"
    />
  </div>
</template>

<script setup>
import { computed } from 'vue'
import EChart from '@/components/EChart.vue'
import * as echarts from 'echarts'

const props = defineProps({
  // 数据数组，每个元素包含 month 和 value
  data: {
    type: Array,
    default: () => [
      { month: '1月', value: 125 },
      { month: '2月', value: 142 },
      { month: '3月', value: 168 },
      { month: '4月', value: 183 },
      { month: '5月', value: 201 },
      { month: '6月', value: 195 },
      { month: '7月', value: 210 },
      { month: '8月', value: 225 },
      { month: '9月', value: 240 },
      { month: '10月', value: 235 },
      { month: '11月', value: 250 },
      { month: '12月', value: 265 }
    ]
  },
  width: {
    type: Number,
    default: 500
  },
  height: {
    type: Number,
    default: 400
  }
})

// 计算折线图配置
const lineOption = computed(() => {
  const months = props.data.map(item => item.month)
  const values = props.data.map(item => item.value)

  return {
    title: {
      text: '入住趋势',
      textStyle: {
        fontSize: 20,
        fontWeight: 'bold',
        color: '#e6ff00'
      },
      left: 'center',
      top: 10
    },

    tooltip: {
      trigger: 'item',
      backgroundColor: 'rgba(0, 0, 0, 0.8)',
      borderColor: 'rgba(24, 144, 255, 0.3)',
      borderWidth: 1,
      textStyle: {
        color: '#ffffff',
        fontSize: 14
      },
      formatter: function(params) {
        return `
          <div style="padding: 8px;">
            <div style="color: ${params.color}; font-weight: bold; margin-bottom: 4px;">
              ${params.name}
            </div>
            <div>入住户数: ${params.value}户</div>
          </div>
        `
      }
    },

    grid: {
      left: '8%',
      right: '8%',
      top: '15%',
      bottom: '15%'
    },

    xAxis: {
      type: 'category',
      data: months,  // ✅ 正确：使用 data 属性
      axisLabel: {
        fontSize: 14,
        color: '#bfbfbf',
        interval: 0,
        margin: 10
      },
      axisLine: {
        lineStyle: {
          color: '#404040'
        }
      },
      axisTick: {
        show: false
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.1)'
        }
      }
    },

    yAxis: {
      type: 'value',
      name: '入住户数(户)',
      nameTextStyle: {
        fontSize: 14,
        color: '#bfbfbf',
        padding: [0, 0, 0, 10]
      },
      axisLabel: {
        fontSize: 14,
        color: '#bfbfbf'
      },
      axisLine: {
        lineStyle: {
          color: '#404040'
        }
      },
      axisTick: {
        show: false
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.1)'
        }
      }
    },

    series: [{
      type: 'line',
      data: values,  // ✅ 正确：使用 data 属性
      smooth: true,
      showSymbol: true,
      symbol: 'circle',
      symbolSize: 8,
      lineStyle: {
        width: 3,
        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
          { offset: 0, color: '#1890ff' },
          { offset: 1, color: '#40a9ff' }
        ])
      },
      itemStyle: {
        color: '#40a9ff',
        borderColor: '#1890ff',
        borderWidth: 2
      },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: 'rgba(24, 144, 255, 0.3)' },
          { offset: 1, color: 'rgba(24, 144, 255, 0.1)' }
        ])
      },
      label: {
        show: true,
        position: 'top',
        fontSize: 12,
        fontWeight: 'bold',
        color: '#ffffff',
        formatter: '{c}'
      },
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      },
      animationType: 'scale',
      animationEasing: 'elasticOut',
      animationDelay: function (idx) {
        return idx * 100
      }
    }]
  }
})
</script>

<style scoped>
.occupancy-trend-line {
  width: 100%;
  height: 100%;
}
</style>
